<template>
  <div class="layer font-semibold text-sm" v-if="props.vipShow">
    <van-overlay :show="props.vipShow" :lock-scroll="false" z-index="100">
      <div class="wrapper" @click.stop>
        <div class="bg-[#1a2c38] text-white rounded-lg max-w-[500px] w-full">
          <div
            class="flex justify-between items-center p-4 border-b border-gray-700"
          >
            <div class="text-lg font-bold">
              {{ $t("layer.activity.VIP") }}
            </div>
            <button class="text-gray-400 hover:text-gray-200">
              <van-icon @click="closevip" class="cursor-pointer" name="cross" />
            </button>
          </div>
          <div
            class="flex justify-center mt-4 m-auto bg-[#0f212e] p-2 w-[180px] rounded-full"
          >
            <button
              :class="{
                'tab-active': activeTab === 'progress',
                'tab-inactive': activeTab !== 'progress'
              }"
              @click="activeTab = 'progress'"
              class="px-4 py-2 rounded-full"
            >
              {{ $t("page.vip.Progress") }}
            </button>
            <button
              :class="{
                'tab-active': activeTab === 'benefits',
                'tab-inactive': activeTab !== 'benefits'
              }"
              @click="activeTab = 'benefits'"
              class="px-4 py-2 rounded-full ml-1"
            >
              {{ $t("page.vip.Benefits") }}
            </button>
          </div>
          <div v-if="activeTab === 'progress'" class="p-4">
            <div class="bg-gray-700 p-4 rounded-lg mt-4 w-[80%] m-auto">
              <div class="flex justify-between items-center">
                <div class="text-lg font-bold">
                  {{ main.user_detail.user_name }}
                </div>
                <i class="far fa-star"></i>
              </div>
              <div class="mt-2 text-sm">
                {{ $t("page.vip.yourvipprogress") }}
              </div>
              <div class="flex justify-between items-center mt-2">
                <!-- <div class="text-sm">{{ getTime(main.user_detail) }} %</div> -->
                <div class="text-sm">{{ getExp(main.vipinfo.exp) }} %</div>
                <i class="fas fa-info-circle"></i>
              </div>
              <div class="bg-gray-600 h-2 rounded mt-2">
                <div
                  class="bg-gray-400 h-2 rounded"
                  :style="{ width: getExp(main.vipinfo.exp) + '%' }"
                ></div>
              </div>
              <div class="flex justify-between items-center mt-2">
                <!-- <div class="text-sm">{{ $t("page.vip.none") }}</div>
                <div class="text-sm flex items-center">
                  <img
                    :src="icon1"
                    style="width: 14px; height: 14px"
                    class="mr-1"
                    alt=""
                  />
                  {{ $t("page.vip.Bronze") }}
                </div> -->
                <div>
                  {{ $t("layer.activity.VIP") }} {{ main.vipinfo.now_level }}
                </div>
                <div>
                  {{ $t("layer.activity.VIP") }} {{ main.vipinfo.next_level }}
                </div>
              </div>
            </div>
            <div class="mt-4">
              <div class="text-lg font-bold">{{ $t("page.vip.next") }}</div>
              <div class="mt-2 flex items-center">
                <img
                  class="w-[32px] h-[32px]"
                  src="../../assets/VIP/1.png"
                  alt=""
                />
                <div class="ml-2">
                  <p class="text-white text-sm font-semibold">
                    {{ $t("page.vip.up1") }}
                  </p>
                  <p class="text-[#b1bad3] text-sm font-semibold">
                    {{ $t("page.vip.up11") }}
                  </p>
                </div>
              </div>
              <div class="mt-2 flex items-center">
                <img
                  class="w-[32px] h-[32px]"
                  src="../../assets/VIP/2.png"
                  alt=""
                />
                <div class="ml-2">
                  <p class="text-white text-sm font-semibold">
                    {{ $t("page.vip.up2") }}
                  </p>
                  <p class="text-[#b1bad3] text-sm font-semibold">
                    {{ $t("page.vip.up22") }}
                  </p>
                </div>
              </div>
              <div class="mt-2 flex items-center">
                <img
                  class="w-[32px] h-[32px]"
                  src="../../assets/VIP/3.png"
                  alt=""
                />
                <div class="ml-2">
                  <p class="text-white text-sm font-semibold">
                    {{ $t("page.vip.up3") }}
                  </p>
                  <p class="text-[#b1bad3] text-sm font-semibold">
                    {{ $t("page.vip.up33") }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            v-if="activeTab === 'benefits'"
            class="p-4 max-h-[300px] overflow-y-auto md:max-h-auto"
          >
            <!-- <div class="">
              <div
                class="bg-[#213743] p-4 rounded-lg mt-2"
                style="
                  box-shadow:
                    0 1px 3px 0 rgba(0, 0, 0, 0.2),
                    0 1px 2px 0 rgba(0, 0, 0, 0.12),
                    inset 0 1px rgba(255, 255, 255, 0.04);
                "
                v-for="(benefit, index) in benefits"
                :key="index"
              >
                <div
                  class="flex justify-between items-center cursor-pointer"
                  @click="toggleBenefit(index)"
                >
                  <div class="text-sm flex items-center">
                    <img
                      :src="benefit.icon"
                      style="width: 14px; height: 14px"
                      class="mr-2"
                      alt=""
                    />
                    {{ benefit.title }}
                  </div>
                  <i
                    :class="
                      benefit.expanded
                        ? 'fas fa-chevron-down'
                        : 'fas fa-chevron-right'
                    "
                  ></i>
                  <van-icon :name="benefit.expanded ? 'arrow-down' : 'arrow'" />
                </div>
                <div
                  v-if="benefit.expanded"
                  class="mt-2 text-xs font-thin text-[#b1bad3]"
                >
                  <div
                    v-for="(detail, detailIndex) in benefit.details"
                    :key="detailIndex"
                  >
                    {{ detail }}
                  </div>
                </div>
              </div>
            </div> -->
            <div class="mt-4 flex items-center">
              <img
                src="../../assets/VIP/up/1.png"
                class="w-[46px] mr-2"
                alt=""
              />
              <div class="ml-2">
                <p class="text-white text-sm font-semibold">
                  {{ $t("page.vip.welfare1") }}
                </p>
                <p class="text-[#b1bad3] text-xs font-semibold">
                  {{ $t("page.vip.welfare11") }}
                </p>
              </div>
            </div>
            <div class="mt-4 flex items-center">
              <img
                src="../../assets/VIP/up/2.png"
                class="w-[46px] mr-2"
                alt=""
              />
              <div class="ml-2">
                <p class="text-white text-sm font-semibold">
                  {{ $t("page.vip.welfare2") }}
                </p>
                <p class="text-[#b1bad3] text-xs font-semibold">
                  {{ $t("page.vip.welfare22") }}
                </p>
              </div>
            </div>
            <div class="mt-4 flex items-center">
              <img
                src="../../assets/VIP/up/3.png"
                class="w-[46px] mr-2"
                alt=""
              />
              <div class="ml-2">
                <p class="text-white text-sm font-semibold">
                  {{ $t("page.vip.welfare3") }}
                </p>
                <p class="text-[#b1bad3] text-xs font-semibold">
                  {{ $t("page.vip.welfare33") }}
                </p>
              </div>
            </div>
            <div class="mt-4 flex items-center">
              <img
                src="../../assets/VIP/up/4.png"
                class="w-[46px] mr-2"
                alt=""
              />
              <div class="ml-2">
                <p class="text-white text-sm font-semibold">
                  {{ $t("page.vip.welfare4") }}
                </p>
                <p class="text-[#b1bad3] text-xs font-semibold">
                  {{ $t("page.vip.welfare44") }}
                </p>
              </div>
            </div>
            <div class="mt-4 flex items-center">
              <img
                src="../../assets/VIP/up/5.png"
                class="w-[46px] mr-2"
                alt=""
              />
              <div class="ml-2">
                <p class="text-white text-sm font-semibold">
                  {{ $t("page.vip.welfare5") }}
                </p>
                <p class="text-[#b1bad3] text-xs font-semibold">
                  {{ $t("page.vip.welfare55") }}
                </p>
              </div>
            </div>
            <div class="mt-4 flex items-center">
              <img
                src="../../assets/VIP/up/6.png"
                class="w-[46px] mr-2"
                alt=""
              />
              <div class="ml-2">
                <p class="text-white text-sm font-semibold">
                  {{ $t("page.vip.welfare6") }}
                </p>
                <p class="text-[#b1bad3] text-xs font-semibold">
                  {{ $t("page.vip.welfare66") }}
                </p>
              </div>
            </div>
          </div>
          <!-- <div
            class="mt-4 text-center p-4 text-sm text-[#b1bad3] bg-[#0f212e] cursor-pointer hover:text-white"
            @click="goToVip"
          >
            {{ $t("page.vip.more") }}
          </div> -->
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script setup>
import {
  ref,
  onMounted,
  onBeforeUnmount,
  watch,
  computed,
  getCurrentInstance
} from "vue";
import { useRouter } from "vue-router";
import icon1 from "../../assets/VIP/vip_1.png";
import icon2 from "../../assets/VIP/vip_2.png";
import icon3 from "../../assets/VIP/vip_3.png";
import icon4 from "../../assets/VIP/vip_4_1.png";
import icon5 from "../../assets/VIP/vip_4_2.png";
import icon6 from "../../assets/VIP/vip_4_3.png";
import icon7 from "../../assets/VIP/vip_4_4.png";
import { mainAct } from "@/store/activeda";
import { dateTimeZone } from "../../utils/date";
const main = mainAct();
const router = useRouter();
const loading = ref(true);
const props = defineProps(["vipShow"]);
const emit = defineEmits(["vipClose"]);
const {
  appContext: {
    config: { globalProperties }
  }
} = getCurrentInstance();

const closevip = () => {
  emit("vipClose");
};

const activeTab = ref("progress");
const benefits = ref([
  {
    icon: icon1,
    title: globalProperties.$t("page.vip.Bronze"),
    details: [
      "Bonus from Support in currency of your choice",
      "Rakeback enabled",
      "Weekly bonuses",
      "Monthly bonuses",
      "VIP Telegram channel access"
    ],
    expanded: false
  },
  {
    icon: icon2,

    title: globalProperties.$t("page.vip.Silver"),
    details: [
      "Bonus from Support in currency of your choice",
      "Weekly & monthly bonuses increased"
    ],
    expanded: false
  },
  {
    icon: icon3,
    title: globalProperties.$t("page.vip.Gold"),
    details: [
      "Bonus from Support in currency of your choice",
      "Weekly & monthly bonuses increased"
    ],
    expanded: false
  },
  {
    icon: icon7,
    title: globalProperties.$t("page.vip.Platinum") + "I - V",
    details: [
      "Bonus from Support in currency of your choice",
      "Weekly & monthly bonuses increased",
      "14 - 42 Day, Daily bonus (Reload)"
    ],
    expanded: false
  }
]);

const toggleBenefit = index => {
  benefits.value[index].expanded = !benefits.value[index].expanded;
};

const goToVip = () => {
  emit("vipClose");
  router.push("/vip");
};

onMounted(() => {
  setInterval(() => {
    loading.value = false;
  }, 2000);
});
watch(
  () => main.isLogin,
  () => {
    if (main.isLogin) {
      //执行onmounted请求
    }
  }
);
const getTime = time => {
  return dateTimeZone(time, "{y}-{m}-{d} {h}:{i}:{s}", main.timeZone);
};

const getExp = exp => {
  return Math.floor(exp * 100) / 100;
};
onBeforeUnmount(() => {});
</script>
<style scoped lang="less">
@media (min-width: 600px) {
}
.layer {
  // width: 375px;
  /*width: 100%;*/
  /*height: 100%;*/
  background-color: #0f212e;
  color: #b1bad3;
  position: relative;
}

.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.tab-active {
  background-color: #2f4553;
  color: #fff;
}
.tab-inactive {
  color: #fff;
}
</style>
